<template>
	<div class="user-analysis">

		<!-- 上方：图表区域 -->
		<div class="charts-section">
			<!-- 左侧：Top 10 TNames Bar Chart -->
			<el-card class="box-card chart-card" shadow="never">
				<template #header>
					<div class="card-header">
						<span>Top 10 标签 (TName)</span>
					</div>
				</template>
				<!-- 仅当柱状图选项存在时渲染图表 -->
				<v-chart v-if="barChartOptions" class="chart" :option="barChartOptions" autoresize />
				<!-- 无数据时的占位符 -->
				<div v-else class="no-chart-data">
					暂无标签数据生成图表
				</div>
			</el-card>

			<!-- 右侧：User Pie Chart -->
			<el-card class="box-card chart-card" shadow="never">
				<template #header>
					<div class="card-header">
						<span>用户标签占比</span>
						<!-- 显示当前选中用户的UID -->
						<span v-if="selectedUser" style="font-weight: normal; color: #606266; font-size: 13px;">
							(用户: {{ selectedUser.uid }})
						</span>
					</div>
				</template>
				<!-- 只有当 selectedUser 有值并且 pieChartOptions 成功生成时才显示饼图 -->
				<!-- 添加 :key="selectedUser.uid" 确保用户切换时图表强制重新渲染 -->
				<v-chart v-if="pieChartOptions && selectedUser" class="chart" :option="pieChartOptions" autoresize
					:key="selectedUser.uid" />
				<!-- 初始状态或无数据时的占位符 -->
				<div v-else class="no-chart-data">
					{{ selectedUser ? '无法为该用户生成饼图' : '请在下方表格中点击用户查看占比' }}
				</div>
			</el-card>
		</div>

		<!-- 下方：用户信息表格 -->
		<div class="table-section">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-header">
						<span>用户信息列表</span>
						<span>
							<!-- 全选按钮 -->
							<el-button @click="toggleAllSelection">全选/取消全选</el-button>
							<el-button @click="analy()">ai分析</el-button>
						</span>
					</div>
				</template>
				<!-- 表格主体 -->
				<!-- :data 绑定到分页后的数据 paginatedTableData -->
				<el-table :data="paginatedTableData" style="width: 100%;" height="300px" border highlight-current-row
					@row-click="handleRowClick" empty-text="暂无用户数据" @selection-change="handleSelectionChange"
					ref="userTable">

					<!-- 加入选择列 -->
					<el-table-column type="selection" width="55"></el-table-column>

					<!-- 表格列定义 -->
					<el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
					<el-table-column prop="uid" label="用户UID" width="180"></el-table-column>
					<el-table-column prop="tab" label="标签 (tab)" min-width="200">
						<template #default="scope">
							<!-- 使用 Tooltip 显示完整标签名 -->
							<el-tooltip v-for="tag in scope.row.tab" :key="tag" class="box-item" effect="dark"
								:content="tag" placement="top">
								<el-tag type="info" size="small"
									style="margin-right: 5px; margin-bottom: 2px; cursor: default;">
									<!-- 标签过长时截断显示 -->
									{{ tag.length > 10 ? tag.slice(0, 10) + '...' : tag }}
								</el-tag>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="tpercent" label="标签占比 (tpercent)" min-width="200">
						<template #default="scope">
							<!-- 格式化显示百分比 -->
							<span v-for="(percent, index) in scope.row.tpercent" :key="index"
								style="margin-right: 8px;">
								{{ (percent * 100).toFixed(1) + '%' }}
							</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="100" align="center" fixed="right">
						<template #default="scope">
							<!-- 点击按钮同样触发行点击事件 -->
							<el-button type="primary" link size="small"
								@click.stop="handleRowClick(scope.row)">查看占比</el-button>
						</template>
					</el-table-column>
				</el-table>


				<!-- 分页控件 -->
				<div class="pagination-container">
					<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalItems"
						:page-sizes="[10, 20, 50]" :page-size="pageSize" :current-page="currentPage"
						@size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</el-card>
		</div>

	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		// nextTick // 如果需要 DOM 更新后的操作，可以取消注释
	} from 'vue';
	// 导入 Element Plus 组件 (按需或全局已注册)
	import {
		ElTable,
		ElTableColumn,
		ElCard,
		ElTag,
		ElButton,
		ElTooltip,
		ElPagination // 导入分页组件
	} from 'element-plus';

	// --- ECharts 相关导入 ---
	import {
		use
	} from 'echarts/core';
	import {
		CanvasRenderer
	} from 'echarts/renderers'; // 渲染器
	import {
		PieChart,
		BarChart
	} from 'echarts/charts'; // 图表类型
	import {
		TitleComponent, // 标题组件
		TooltipComponent, // 提示框组件
		LegendComponent, // 图例组件
		GridComponent, // 网格组件 (柱状图需要)
	} from 'echarts/components'; // ECharts 组件
	import VChart from 'vue-echarts'; // vue-echarts 包装器
	import axios from '@/apiaxios/axiosInstance';
	import emitter from '@/utils/evenBus';

	// 注册必须的 ECharts 组件
	use([
		CanvasRenderer,
		PieChart,
		BarChart,
		TitleComponent,
		TooltipComponent,
		LegendComponent,
		GridComponent,
	]);

	const selectedRows = ref([]);
	const analysisPrompt = "每种爱好后面附带的一个百分比代表了用户对这种类型的视频的观看比例通过上述信息猜测这些用户的个人爱好，并尝试推测他们的性格";

	// 选择变化事件处理函数
	const handleSelectionChange = (val) => {
		// 找出新增的选中行
		const newSelectedRows = val.filter(item => !selectedRows.value.some(selectedItem => selectedItem.id === item
			.id));
		// 找出取消选中的行
		const deselectedRows = selectedRows.value.filter(selectedItem => !val.some(item => item.id === selectedItem
			.id));

		// 移除取消选中的行
		deselectedRows.forEach(row => {
			const index = selectedRows.value.findIndex(selectedItem => selectedItem.id === row.id);
			if (index !== -1) {
				selectedRows.value.splice(index, 1);
			}
		});

		// 添加新增的选中行
		selectedRows.value.push(...newSelectedRows);

		// console.log('选中的行:', selectedRows.value);
	};

	// 全选/取消全选函数
	const toggleAllSelection = () => {
		if (selectedRows.value.length === paginatedTableData.value.length) {
			userTable.value.clearSelection();
			selectedRows.value = [];
		} else {
			userTable.value.toggleAllSelection();
			selectedRows.value = [...paginatedTableData.value];
		}
	};

	// AI 分析按钮点击事件
	function analy() {
		if (selectedRows.value.length === 0) {
			alert("请至少选择一个用户进行分析。");
			return;
		}
		// 只提取需要发送给 AI 的字段 (uid, tab, tpercent)，避免发送过多无关数据
		const dataToSend = selectedRows.value.map(user => ({
			uid: user.uid,
			tab: user.tab,
			tpercent: user.tpercent
		}));

		// 将选中的用户数据转换为 JSON 字符串
		const selectedRowsStr = JSON.stringify(dataToSend, null, 2); // 使用 null, 2 美化输出，方便调试
		// 组合提示语和数据
		const requestPayload =  selectedRowsStr + analysisPrompt;
		// console.log("准备发送给 AI 的数据:\n", requestPayload);

		// 使用事件总线发送数据到 ai.vue
		emitter.emit('sendToAI', requestPayload);

		// 可以选择性地清空选择，或给出提示
		// alert(`已将 ${selectedRows.value.length} 个用户的数据发送给 AI 进行分析。`);
	}


	// --- 模拟数据 ---
	// 保持原始数据不变，作为所有计算的基础
	const rawData = ref();

	// --- 响应式状态 ---
	const selectedUser = ref(null); // 存储当前在饼图中显示的用户数据 (点击表格行后设置)
	const userTable = ref(null); // 对 el-table 的引用

	// --- 分页相关状态 ---
	const currentPage = ref(1); // 当前页码，默认为第 1 页
	const pageSize = ref(10); // 每页显示条目数，默认为 10 条

	// --- 计算属性 ---

	// 1. 格式化表格数据：按 UID 分组聚合 (这个计算属性保持不变，它处理所有数据)
	const formattedTableData = computed(() => {
		// 检查原始数据是否存在
		if (!rawData.value || rawData.value.length === 0) {
			return [];
		}
		// 使用 Map 来高效地分组用户数据
		const userMap = new Map();
		// 遍历原始数据
		rawData.value.forEach(item => {
			// 如果 Map 中还没有这个 uid，则初始化
			if (!userMap.has(item.uid)) {
				userMap.set(item.uid, {
					uid: item.uid,
					tab: [], // 存储该用户的所有 tname
					tpercent: [] // 存储该用户对应的 tpercent
				});
			}
			// 获取该 uid 对应的数据对象，并添加当前的 tname 和 tpercent
			const userData = userMap.get(item.uid);
			userData.tab.push(item.tname);
			userData.tpercent.push(item.tpercent);
		});
		// 将 Map 的值转换为数组，并添加从 1 开始的自增 ID (这个 ID 用于表格显示，不影响分页逻辑)
		return Array.from(userMap.values()).map((user, index) => ({
			id: index + 1, // 生成从 1 开始的顺序 ID
			...user
		}));
	});

	// 2. 计算总条目数 (用于分页控件)
	const totalItems = computed(() => formattedTableData.value.length);

	// 3. 计算当前页应显示的数据 (用于表格 :data 绑定)
	const paginatedTableData = computed(() => {
		// 如果没有格式化后的数据，返回空数组
		if (!formattedTableData.value || formattedTableData.value.length === 0) {
			return [];
		}
		// 计算当前页数据的起始索引
		// 页码是从 1 开始的，而数组索引是从 0 开始的，所以需要 currentPage.value - 1
		const startIndex = (currentPage.value - 1) * pageSize.value;
		// 计算当前页数据的结束索引 (slice 方法不包含结束索引本身)
		const endIndex = startIndex + pageSize.value;
		// 使用 Array.slice() 方法从格式化后的完整数据中提取当前页的数据
		return formattedTableData.value.slice(startIndex, endIndex);
	});


	// 4. 计算 Top 10 TNames (用于柱状图, 基于全部原始数据)
	const topTNames = computed(() => {
		if (!rawData.value || rawData.value.length === 0) {
			return [];
		}
		// 统计每个 tname 出现的次数
		const tnameCounts = rawData.value.reduce((acc, item) => {
			acc[item.tname] = (acc[item.tname] || 0) + 1; // 如果 tname 已存在则计数+1，否则初始化为1
			return acc;
		}, {}); // 初始值为空对象
		// 将统计结果转换为 { name: 'xxx', count: N } 格式的数组
		return Object.entries(tnameCounts)
			.map(([name, count]) => ({
				name,
				count
			}))
			.sort((a, b) => b.count - a.count) // 按 count 降序排序
			.slice(0, 10); // 取前 10 个
	});

	// 5. 生成饼图配置 (基于 selectedUser)
	const pieChartOptions = computed(() => {
		// 如果没有选中用户，或者选中用户没有标签数据，则不生成配置
		if (!selectedUser.value || !selectedUser.value.tab || selectedUser.value.tab.length === 0) {
			return null;
		}
		// 将选中用户的数据转换为 ECharts 饼图需要的格式
		const chartData = selectedUser.value.tab.map((name, index) => ({
			name: name, // 标签名
			value: selectedUser.value.tpercent[index] || 0 // 对应的百分比，确保有值
		}));
		// 返回 ECharts 饼图的配置对象
		return {
			tooltip: { // 提示框配置
				trigger: 'item', // 触发类型：数据项图形触发
				formatter: '{a} <br/>{b} : {c} ({d}%)' // 格式化显示：系列名、数据名、数值、百分比
			},
			legend: { // 图例配置
				orient: 'vertical', // 垂直布局
				left: 'left', // 靠左显示
				top: 'center', // 垂直居中
				data: chartData.map(item => item.name) // 图例数据源
			},
			series: [ // 系列列表
				{
					name: '标签占比', // 系列名称，对应 tooltip 中的 {a}
					type: 'pie', // 图表类型：饼图
					radius: '70%', // 饼图半径
					center: ['65%', '50%'], // 饼图中心位置 [水平, 垂直]，调整以适应左侧图例
					data: chartData, // 系列数据源
					emphasis: { // 高亮状态配置
						itemStyle: {
							shadowBlur: 10, // 图形阴影模糊大小
							shadowOffsetX: 0, // 阴影水平偏移距离
							shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
						}
					},
					label: { // 标签配置 (显示在饼图上)
						show: false, // 默认不在扇区上显示标签，让图例和提示框显示信息
						position: 'center'
					},
					labelLine: { // 标签引导线
						show: false
					}
				}
			]
		};
	});

	// 6. 生成柱状图配置 (基于 topTNames)
	const barChartOptions = computed(() => {
		// 如果没有 topTNames 数据，则不生成配置
		if (!topTNames.value || topTNames.value.length === 0) {
			return null;
		}
		// 返回 ECharts 柱状图的配置对象
		return {
			tooltip: { // 提示框
				trigger: 'axis', // 坐标轴触发
				axisPointer: { // 坐标轴指示器
					type: 'shadow' // 类型：阴影指示器
				}
			},
			grid: { // 网格配置，控制图表主体位置
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true // 防止标签溢出
			},
			xAxis: { // X 轴配置
				type: 'category', // 类型：类目轴
				data: topTNames.value.map(item => item.name), // X 轴数据（标签名）
				axisLabel: { // 坐标轴标签配置
					interval: 0, // 强制显示所有标签
					rotate: 30, // 旋转角度，防止标签重叠
					hideOverlap: true // 自动隐藏重叠标签（如果旋转后仍然重叠）
				}
			},
			yAxis: { // Y 轴配置
				type: 'value', // 类型：数值轴
				name: '出现次数' // Y 轴名称
			},
			series: [ // 系列列表
				{
					name: '出现次数', // 系列名称
					type: 'bar', // 图表类型：柱状图
					data: topTNames.value.map(item => item.count), // 系列数据（出现次数）
					barWidth: '60%', // 柱条宽度
					label: { // 图形上的文本标签
						show: true, // 显示标签
						position: 'top' // 标签位置：柱条顶部
					},
					itemStyle: { // 设置柱条颜色等
						// color: '#5470C6' // 可以自定义颜色
					}
				}
			]
		};
	});


	// --- 方法 ---

	// 处理表格行点击事件
	const handleRowClick = (row) => {
		console.log('表格行被点击:', row);
		selectedUser.value = row; // 更新选中的用户数据，触发饼图区域的重新渲染
	};

	// 处理每页显示条目数变化事件
	const handleSizeChange = (newSize) => {
		console.log(`每页 ${newSize} 条`);
		pageSize.value = newSize; // 更新 pageSize
		currentPage.value = 1; // 切换每页条数时，通常重置到第一页
	};

	// 处理当前页码变化事件
	const handleCurrentChange = (newPage) => {
		console.log(`当前页: ${newPage}`);
		currentPage.value = newPage; // 更新 currentPage
		// 可以在这里添加逻辑，比如页面切换时滚动到表格顶部
		// if (userTable.value) {
		//   userTable.value.setScrollTop(0); // Element Plus Table 实例可能有类似方法，需查阅文档
		// }
	};

	function getdata() {

		const Data = new URLSearchParams();
		Data.append('orderBy', 1);
		axios.post("/backend/userFlavor/loadDataList", Data, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}).then(response => {
			if (response.status === 200) {
				if (response.data.code === 200 && response.data.data && response.data.data.list) {

					rawData.value = response.data.data.list;
					// console.log(response);
					console.log(rawData.value);

				} else {
					console.error("获取数据失败:", response.data.message || "返回数据格式错误");
					alert("获取数据失败: " + (response.data.message || "返回数据格式错误"));
				}
			} else {
				console.error("服务器响应错误:", response.status);
				alert("服务器响应错误！请稍后再试");
			}
		}).catch(error => {
			console.error("请求错误:", error);
			if (error.response) {
				console.error("API请求错误详情:", error.response.status, error.response.data);
				if (error.response.status === 400) {
					alert("请求参数有误");
				} else if (error.response.status === 401) {
					alert("未授权");
				} else {
					alert(`请求错误 (${error.response.status})`);
				}
			} else if (error.request) {
				console.error("网络错误:", error.request);
				alert("网络错误，无法连接到服务器");
			} else {
				alert("请求处理时发生错误");
			}
		});
	}

	// --- 生命周期钩子 ---
	onMounted(() => {
		// 组件挂载后执行的操作
		console.log("用户分析组件已挂载。");
		// 可以在这里默认选中分页后表格的第一行 (如果需要)
		// if (paginatedTableData.value.length > 0) {
		//   handleRowClick(paginatedTableData.value[0]);
		//   // 如果希望表格高亮默认选中的行
		//   nextTick(() => {
		//     if(userTable.value) {
		//       userTable.value.setCurrentRow(paginatedTableData.value[0]);
		//     }
		//   });
		// }
		getdata();
	});
</script>

<style scoped>
	/* 全局或局部基础样式重置 (根据需要调整) */
	* {
		margin: 0;
		padding: 0;
		/* color: black; */
		/* 移除全局颜色设置，让组件默认颜色生效 */
		font-size: 14px;
	}

	.user-analysis {
		padding: 20px;
		font-family: sans-serif;
		background-color: #f5f7fa;
		/* 给页面一个浅灰色背景 */
		min-height: 100vh;
		/* 确保内容区域至少占满视口高度 */
		box-sizing: border-box;
		/* 包含 padding */
	}

	.box-card {
		margin-bottom: 20px;
		border: none;
		/* 移除卡片边框，让阴影更柔和 */
		border-radius: 4px;
		/* 轻微圆角 */
		overflow: hidden;
		/* 确保圆角生效 */
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		font-size: 16px;
		/* 标题稍大 */
		color: #303133;
		/* 深灰色标题 */
		/* background-color: aqua; */
		/* 注释掉背景色 */
		/* border: 3px solid #303133; */
		/* 注释掉边框 */
	}

	/* 自定义卡片头部内边距，使其更紧凑 */
	:deep(.el-card__header) {
		padding: 15px 20px;
		/* 调整内边距 */
	}

	/* 上方图表区域布局 */
	.charts-section {
		display: flex;
		/* 使用 Flexbox 布局 */
		gap: 20px;
		/* 图表卡片之间的间距 */
		margin-bottom: 20px;
		/* 与下方表格区域的间距 */
		flex-wrap: wrap;
		/* 在小屏幕上换行 */
	}

	/* 图表卡片样式 */
	.chart-card {
		flex: 1;
		/* 让两个卡片平分空间 */
		min-width: 400px;
		/* 设置最小宽度，防止过窄 */
		margin-bottom: 0;
		/* 移除图表卡片的下边距，因为 section 已经有边距了 */
		display: flex;
		/* 让卡片内容垂直排列 */
		flex-direction: column;
	}

	/* 图表卡片内容区域 */
	.chart-card :deep(.el-card__body) {
		flex-grow: 1;
		/* 让图表区域填充剩余空间 */
		padding: 10px;
		/* 减少内边距 */
		display: flex;
		/* 内部也用flex，方便占位符居中 */
		justify-content: center;
		align-items: center;
		min-height: 370px;
		/* 给卡片内容区一个最小高度，保证占位符和图表高度一致性 */
		box-sizing: border-box;
	}


	/* ECharts 图表容器 */
	.chart {
		height: 350px;
		/* 设置图表固定高度 */
		width: 100%;
		/* 宽度充满卡片 */
	}

	/* 图表无数据时的占位符样式 */
	.no-chart-data {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #909399;
		/* 浅灰色文字 */
		font-size: 14px;
		text-align: center;
		width: 100%;
		/* 宽度充满 */
		height: 100%;
		/* 高度充满父容器 (.el-card__body) */
		/* min-height: 150px; */
		/* 不再需要，因为父容器有最小高度 */
	}

	/* 下方表格区域 */
	.table-section {
		/* 该区域会自动填充剩余宽度 */
	}

	/* 表格卡片内容区域，移除默认内边距，让表格占满 */
	.table-section :deep(.el-card__body) {
		padding: 0;
	}

	/* 表格行点击手势 */
	.el-table :deep(.el-table__row) {
		cursor: pointer;
	}

	/* (可选) 微调表格标签列的样式 */
	.el-tag {
		max-width: 120px;
		/* 限制标签最大宽度 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
		/* 垂直居中对齐 */
	}

	.el-tooltip {
		vertical-align: middle;
		/* Tooltip 包裹的 Tag 也居中 */
	}

	/* 分页控件容器样式 */
	.pagination-container {
		display: flex;
		justify-content: flex-end;
		/* 分页控件靠右对齐 */
		padding: 15px 20px;
		/* 给分页控件一些内边距 */
		background-color: #fff;
		/* 如果卡片body padding为0，给分页一个背景色 */
		border-top: 1px solid #ebeef5;
		/* 在表格和分页之间加一条细线 */
	}
</style>